<template>
  <div class="border flex-pack-center">
    <div class="sort ">
      {{item.candidateOrder}}
    </div>
    <div class="imgBorder flex-pack-center">
      <img :src="this.$DEV_ENV_API+'/api/'+item.cover" class="headImg">
    </div>
    <div class="fontBorder">
      <div class="name">
        {{item.name}}
      </div>
      <div class="quantity">
        {{item.votesNum}}票
      </div>
    </div>
    <div class="voteBirder flex-pack-end" @click="vote(this.item)">
      <img :src="voteImg" class="mm-image">
      <div class="voteFont">给TA投票</div>
    </div>
    <div v-transfer-dom>
      <x-dialog
        v-show="showDialogStyle"
        hide-on-blur
        :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent',display:'flex','justify-content':'center','align-items':'center'}"
      >
        <div class="voteSuccess flex-v">
          <span class="voteSuccess_title">投票成功</span>
          <span class="voteSuccess_content">
            当前
            <p>{{item.votesNum}}</p>票
          </span>
          <div class="voteSuccess_button" @click="showDialogStyle=false">
            <span>关闭</span>
          </div>
        </div>
      </x-dialog>
    </div>
  </div>

</template>

<script>
  import { TransferDomDirective as TransferDom } from "vux";
  import { XDialog, Toast } from "vux";
    export default {
      name: "rankItem",
      data(){
        return{
          showDialogStyle:false,
          isVoteToday:false,
          voteImg: require( '../assets/rank/tp_button@2x.png')
        }
      },
      directives: {
        TransferDom
      },
      props:["item"],
      watch:{
        item(newVal){
          console.log(newVal)
        }
      },
      components:{
        XDialog
      },
      methods:{
        vote(item){
          console.log(item);
          this.showDialogStyle = true;
          // that.peopleList[row][col]["isVote"] = true;
          // that.peopleList[row][col]["votesNum"] = parseInt(votesNum) + 1;
          // that.localVote = parseInt(votesNum) + 1;
          this.props.item.votesNum = that.props.item.votesNum + 1;
          // if (this.isVoteToday == true) {
          //   this.isVote = true;
          // } else {
          //   let openID = localStorage.getItem("openid");
          //   let param = new Object();
          //   param.openId = openID;
          //   param.candidateId = item.candidateId;
          //   let postParam = JSON.stringify(param);
          //   let that = this;
          //   this.$http
          //     .post(this.$DEV_ENV_API + "/api/postVotes", postParam)
          //     .then(res => {
          //       if (res.data.code == "1") {
          //         that.showDialogStyle = true;
          //         // that.peopleList[row][col]["isVote"] = true;
          //         // that.peopleList[row][col]["votesNum"] = parseInt(votesNum) + 1;
          //         // that.localVote = parseInt(votesNum) + 1;
          //         that.props.item.votesNum = that.props.item.votesNum + 1;
          //       } else {
          //         that.isVote = true;
          //         that.isVoteToday = true;
          //       }
          //     })
          //     .catch(err => {});
          // }
        }
      }
    }
</script>

<style scoped>
  .mm-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .border{
    width: 90%;
    display: flex;
    justify-content: center;
    height: 70px;
    margin-left: 5%;
    border-bottom: 1px solid #09808F;
  }
  .imgBorder{
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #FFFFFF;
    margin-left: 20px;
    margin-top: 10px;

  }
  .headImg{
    width: 46px;
    height: 46px;
    border-radius: 10px;
    margin-left: 2px;
    margin-top: 2px;
    object-fit: cover;

  }
  .fontBorder{
    display: flex;
    flex: 4;
    flex-direction: column;
    justify-content: flex-start;
    height: 42px;
    margin-top: 14px;
    margin-left: 20px;
  }
  .name{
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    font-family: PingFang-SC-Regular;
  }
  .quantity{
    margin-top: 2px;
    text-align: center;
    color: #FFEF89;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    font-family: PingFang-SC-Medium;
  }
  .sort{
    display: flex;
    width: 10px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #FFFFFF;
    font-family: PingFang-SC-Semibold;
  }
  .voteBirder{
    display: flex;
    width: 80px;
    position: relative;
  }
  .voteFont{
    position: absolute;
    top: 25px;
    left: 10px;
    font-size: 14px;
    color: #FFFFFF;
    font-family: PingFang-SC-Semibold;

  }
  /*居中对齐*/
  .flex-pack-center {
    justify-content: center;
    -webkit-justify-content: center;
  }
  /*右对齐*/
  .flex-pack-end {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  .voteSuccess {
    width: 270px;
    height: 198px;
    background-image: url("../assets/home/tp_bj@2x.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .voteSuccess_title {
    color: #ffffff;
    font-size: 28px;
    line-height: 20px;
    margin-top: 50px;
  }
  .voteSuccess_content {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2px;
  }
  .voteSuccess_content > p {
    color: #ffef89;
    font-size: 14px;
  }
  .voteSuccess_button {
    width: 80px;
    height: 47px;
    background-image: url("../assets/home/tp_button@3x.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .voteSuccess_button > span {
    width: 28px;
    height: 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    line-height: 20px;
  }

</style>
